import React, { useState } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { Header, Footer } from '../../components';
import './index.less';
import { Form, Input, Select, Button, PageHeader, Steps, Row, Col } from 'antd';
import { changePassword } from '../../http/api';

interface MatchParams {}
const { Step } = Steps;
const { Option } = Select;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 5 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 5,
    },
  },
};

export const ForgetPassword: React.FC<RouteComponentProps<MatchParams>> = (
  props
) => {
  const [form] = Form.useForm();
  const [captchaTime, setCaptchaTime] = useState('获取验证码');
  // 提交表单
  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
    const data = {
      mobile: values.phone,
      password: values,
      repassword: values,
      oldpassword: values,
    };
    changePassword(data).then((res) => {});
  };

  const prefixSelector = (
    <Form.Item name='prefix' noStyle>
      <Select style={{ width: 70 }}>
        <Option value='86'>+86</Option>
        <Option value='87'>+87</Option>
      </Select>
    </Form.Item>
  );

  // 获取验证码相关
  const getcaptcha = () => {
    if (captchaTime !== '获取验证码') {
      return;
    }
    let time = 60;
    const interval = setInterval(() => {
      time--;
      setCaptchaTime(`${time}s后获取`);
      if (time === 0) {
        time = 60;
        setCaptchaTime('获取验证码');
        clearInterval(interval);
      }
    }, 100);
  };

  return (
    <div className='registerbox'>
      <Header></Header>

      <div className='register'>
        <PageHeader className='site-page-header' title='找回密码' subTitle='' />
        <Steps current={0} className='step' size='small'>
          <Step title='填写信息' description='' />
          <Step title='找回成功' description='' />
        </Steps>
        <Form
          {...formItemLayout}
          form={form}
          name='register'
          onFinish={onFinish}
          initialValues={{
            prefix: '86',
          }}
          scrollToFirstError
        >
          <Form.Item
            name='phone'
            label='手机号'
            rules={[
              { required: true, message: '请输入您的手机号码!' },
              {
                validator: async (rulreturne, value) => {
                  if (!value) {
                    return;
                  }
                  const regu = '^1[0-9]{10}$';
                  const re = new RegExp(regu);
                  if (re.test(value)) {
                  } else {
                    throw new Error('请输入正确的手机号码!');
                  }
                },
              },
            ]}
          >
            <Input addonBefore={prefixSelector} style={{ width: '100%' }} />
          </Form.Item>

          <Form.Item
            name='captcha'
            label='验证码'
            rules={[{ required: true, message: '请输入验证码!' }]}
          >
            <Row gutter={6}>
              <Col span={20}>
                <Form.Item name='captcha' noStyle>
                  <Input />
                </Form.Item>
              </Col>
              <Col span={4}>
                <Button className='getcaptcha' onClick={getcaptcha}>
                  {captchaTime}
                </Button>
              </Col>
            </Row>
          </Form.Item>

          <Form.Item
            name='password'
            label='设置密码'
            rules={[
              {
                required: true,
                message: '请输入密码!',
              },
            ]}
            hasFeedback
          >
            <Input.Password />
          </Form.Item>

          <Form.Item
            name='confirm'
            label='确认密码'
            dependencies={['password']}
            hasFeedback
            rules={[
              {
                required: true,
                message: '请输入确认密码!',
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('两次密码不一致!'));
                },
              }),
            ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item {...tailFormItemLayout}>
            <Button type='primary' htmlType='submit' block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
      <Footer></Footer>
    </div>
  );
};
